<template>
	<view class="content">
		<view class="head">
			<u-avatar :src="src" size="150" @click="showAvatar()" style="margin-top: 180rpx;"></u-avatar>
			<h2>登录/注册</h2>
		</view>
		
		<u-cell-group :border="false" class="hover">
			<u-cell-item hoverClass="false" :key="0" :border-bottom="false" :border-top="false" bg-color="#323232" title="我的信息"
				:title-style="{ marginLeft: '20rpx', color: 'white'}" :center="true">
				<template #icon>
					<u-icon name="account" color="#ffffff"></u-icon>
				</template>
			</u-cell-item>
		</u-cell-group>

		<view style="height: 15rpx;"></view>

		<u-cell-group :border="false">
			<u-cell-item hoverClass="false" v-for="(item, index) in groupList" :key="index" :border-bottom="false" :border-top="false"
				bg-color="#323232" :title="item.title" :title-style="{ marginLeft: '20rpx', color: 'white' }"
				@tap="linkTo(item)">
				<template #icon>
					<u-icon :name="item.icon" color="#ffffff"></u-icon>
				</template>
			</u-cell-item>
		</u-cell-group>

		<view style="height: 15rpx;"></view>

		<u-cell-group :border="false">
			<u-cell-item hoverClass="false" :key="0" :border-bottom="false" :border-top="false" bg-color="#323232" title="设置" @click="setUp"
				:title-style="{ marginLeft: '20rpx', color: 'white' }">
				<template #icon>
					<u-icon name="setting" color="#ffffff"></u-icon>
				</template>
			</u-cell-item>
		</u-cell-group>
	</view>
</template>

<script setup>
	import {
		reactive,
		getCurrentInstance
	} from 'vue'

	// 获取全局实例
	const instance = getCurrentInstance()
	const {
		$u
	} = instance.appContext.config.globalProperties

	const groupList = reactive([{
			title: '比赛记录',
			icon: 'order',
			bind: "/pages/record/record"
		},
		{
			title: '意见反馈',
			icon: 'warning'
		},
	])

	const src = '';

	const changeMyInfo = () => {
		uni.navigateTo({
			url: '/pages/myInfo/myInfo'
		})
	}

	const linkTo = (item) => {
		uni.switchTab({
			url: item.bind
		})
	}

	const showAvatar = () => {
		if (src) {
			uni.previewImage({
				urls: [src],
				current: 0
			})
		} else {
			//跳转至登录
			uni.navigateTo({
				url: "/pages/login/login"
			})
		}

	}

	const login = () => {
		uni.getProvider({
			service: 'oauth',
			success: (res) => {
				if (res.provider.includes('univerify')) {
					console.log("支持一键登录")
				}
			}
		})
	}

	const setUp = () => {
		plus.nativeUI.actionSheet({
			cancel: '取消',
			buttons: [{
					title: '检查更新'
				},
				{
					title: '切换账号'
				},
				{
					title: '退出登录'
				}
			]
		}, async (e) => {
			if (e.index === 1) {
				uni.showToast({
					title: "已是最新版本"
				})
			} else if (e.index === 2) {
				// 切换账号逻辑
			} else if (e.index === 3) {
				try {
					uni.showLoading({
						title: '正在注销...',
						mask: true
					})

					// 假设 myRequest 和 api 已经定义
					const response = await myRequest({
						url: api.logout,
						method: 'GET',
						data: {},
					})

					if (response.data.code === 200 && response.data.httpCode === 200) {
						uni.hideLoading()
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}
				} catch (error) {
					uni.hideLoading()
					console.error('退出登录失败:', error)
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	.head {
		height: 500rpx;
		width: 100%;
		text-align: center;
		align-items: center;
		color: #fff;
	}

	h2 {
		padding: 20rpx 0;
		font-weight: 400;
	}
</style>